<template>
  <div class="min-h-screen bg-light font-inter">
    <header class="w-full z-50 bg-primary shadow-lg">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
            <span class="text-white font-bold text-xl">技术</span>
          </div>
          <span class="text-xl font-bold text-white">文档</span>
        </a>
        <nav class="flex items-center space-x-8">
          <a href="/tech-docs" class="text-white hover:text-secondary transition-colors font-medium">返回列表</a>
        </nav>
      </div>
    </header>

    <section class="py-12">
      <div class="container mx-auto px-4 max-w-3xl bg-white rounded-2xl shadow-lg p-8">
        <button @click="goBack" class="mb-6 text-primary hover:underline flex items-center">
          <i class="fa-solid fa-arrow-left mr-2"></i> 返回
        </button>
        <div v-if="loading" class="text-center py-12 text-muted">加载中...</div>
        <div v-else-if="error" class="text-center py-12 text-red-500">{{ error }}</div>
        <div v-else>
          <h1 class="text-3xl font-bold mb-4">{{ doc.title }}</h1>
          <div class="flex flex-wrap gap-4 mb-6 text-muted text-sm">
            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full">{{ doc.category }}</span>
            <span><i class="fa-regular fa-calendar mr-1"></i>{{ doc.date }}</span>
          </div>
          <div class="prose prose-lg max-w-none" v-html="doc.content"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const doc = ref({})
const loading = ref(true)
const error = ref('')

function goBack() {
  router.push('/tech-docs')
}

onMounted(async () => {
  try {
    const res = await axios.get(`/api/tech-docs/${route.params.id}`)
    doc.value = res.data
  } catch (e) {
    error.value = '加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.text-muted {
  color: #667085;
}
.prose {
  color: #222;
  line-height: 1.8;
}
.prose h1, .prose h2, .prose h3 {
  color: #165DFF;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose a {
  color: #165DFF;
  text-decoration: underline;
}
.prose pre {
  background: #f6f8fa;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
}
.prose img {
  max-width: 100%;
  border-radius: 8px;
}
</style> 